<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D变换_位移</title>
    <style>
        .outer{
            width: 300px;
            height: 300px;
            border:2px solid black;
            margin:520px;
            transform-style: preserve-3d;/*开启3D空间*/
            perspective: 500px;

            perspective-origin: 152px 152px;/*设置透视点的位置*/

        }
        .inner{
            width: 300px;
            height: 300px;
            background-color: rgba(0,191,225,0.7);
            text-align: center;
            line-height: 300px;
            /*
            位移:不是缩放,是指在z轴上移动,离我们的眼睛越来越近,看起来就会越来越大
            超过500px就在我们的眼睛的后面了,就看不到了
            */
            /*transform:translateZ(0px) rotateX(30deg);*/


            /*使用translate3d必须要有3个值*/
            transform: translate3d(100px,100px,10px) rotateX(30deg);
        }

    </style>
</head>
<body>
<div class="outer">
    <div class="inner">inner1</div>
</div>

</body>
</html>